<template>
    <div>
        <my-list :data="tasks" ref="list" :page-size="10">
            <el-table-column label="任务名称" align="left" prop="jobName" width="240">
            </el-table-column>
            <el-table-column label="进度" align="left" class-name="cell-flex" width="240">
                <template v-slot="scope">
                    <jenkins-log value="scope.row"></jenkins-log>
                </template>
            </el-table-column>
        </my-list>


        <div style="display: flex;align-items: center">
            <div>
                <el-tag>{{ value.language }}</el-tag>
                :
                <el-tag>{{ value.appName }}</el-tag>
            </div>
            <el-steps simple :active="logs.step" v-if="logs?.steps?.length" finish-status="success" process-status="wait"
                      style="padding: 4px;flex:1;">
                <el-step :title="item.title" v-for="(item,index) in logs.steps" :key="index"
                         @click.native="pop_msg(item)"
                         :status="item.status"
                ></el-step>
            </el-steps>
            <div v-else>队列中...</div>
        </div>
        <el-dialog :title="log.title" append-to-body v-model="log_visible" width="80vw" height="80vh">
            <pre v-html="log.content" style="overflow: auto;"/>
        </el-dialog>
    </div>
</template>

<script setup>




//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"log_visible":false,"logs":{"steps":[],"result":""},"log":{},"pendding":false});


const $props = defineProps({

});


const $model = defineModel({ type: Object });



const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const pop_msg = function(item) {
    $data.log = item;
    $data.log_visible = true;
};
const getLog = function() {
    jv.$http.post("/dev/jenkins/last-log", {
        gitId: $model.gitId,
        branch: $model.branch,
        appName: $model.appName
    }).then(res => {
        if (!res.data.data) {
            jv.warn("服务器没有返回内容")
            return;
        }
        if (res.data.data && res.data.data.length) {
        }
        $data.logs.steps = res.data.data.map(it => {
            var status = "wait";
            if (it.successful === true) {
                status = "success"
            } else if (it.successful === false) {
                status = "error"
            }
            return {title: it.name, content: it.content, status: status}
        });
        $data.logs.result = res.data.value;
        $data.logs.step = $data.logs.steps.length;
        if (res.data.value === true) {
            return
        } else if (res.data.value === false) {
            return
        }
    });
};

onMounted( function() {
} )



</script>

<style lang="scss">
.el-step__main {
    zoom: 0.8;
}
</style>
